<script lang="ts" setup>
import type { AreaItem } from '@/apis/model/resolve'
import { Message } from '@arco-design/web-vue'
// import EditCname from '@/components/EditCname.vue'
import { getCdnClusterSiteListApi } from '@/apis/modules/cdn'

import { siteResolveStatusOptions } from '@/constants/cdn-node'
import EditorCnameDialog from './EditorCnameDialog.vue'

interface IProp {
  loading: boolean
  record: AreaItem
  run: () => void
}
const props = withDefaults(defineProps<IProp>(), {})
const visible = defineModel<boolean>('visible', { required: true })

const queryParams = ref({
  resolve_domain_id: props.record.id,
})
const { loading, data, pagination, run } = useListRequest(
  getCdnClusterSiteListApi,
  {
    params: queryParams,
    immediate: true,
  },
)

function handleChange(current: number, limit: number) {
  pagination.value.current = current
  pagination.value.pageSize = limit
  run()
}

const columns = buildColumns([
  {
    title: '站点域名',
    dataIndex: 'site_domain',
    format: 'copy',
  },
  {
    title: 'CNAME',
    dataIndex: 'cname',
    slotName: 'cname',
    // format: 'copy',
    width: 300,
  },
  {
    title: '目标状态',
    slotName: 'resolve_switch',
    width: 96,
  },
  {
    title: '处理结果',
    slotName: 'result',
  },
  {
    title: '更新时间',
    dataIndex: 'updated_at',
    format: 'date-time',
    width: 180,
  },
])

const handleClose = () => (data.value = [])
const {
  visible: editorCnameDialogVisible,
  open: openEditorCnameDialog,
  data: editorCnameDialogData,
} = usePopup()

const { copy } = useClipboard({ legacy: true })
function handleCopy(content: string) {
  copy(content)
  Message.success('复制成功')
}
</script>

<template>
  <resource-dialog
    v-model:visible="visible"
    title="关联站点"
    :width="900"
    :loading="loading"
    :mask-closable="false"
    :footer="false"
    :before-close="handleClose"
  >
    <a-alert
      class="mb-6 rounded-2"
      style="border-radius: 8px"
    >
      <template #icon>
        <i-icons-sigh />
      </template>
      <span class="text-12px !text-[#4E5969]">若有失败记录请检查解析相关配置或者手动添加解析记录。</span>
    </a-alert>
    <div style="max-height: 500px; overflow: auto">
      <a-table
        :columns="columns"
        :data="data"
        :pagination="false"
      >
        <!-- <template #cname="{ record }">
          <copy-field :edit="() => open(record)">
            {{ record.full_cname || '-' }}
          </copy-field>
        </template> -->
        <template #cname="{ record }">
          <div class="flex items-center">
            <span
              style="
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >{{ record.cname || '-' }}.{{
              record.resolve_domain_name || '-'
            }}</span>
            <div>
              <i-icons-copy
                class="table-icon ml-1"
                size="16px"
                @click="handleCopy(record.cname)"
              />
            </div>
            <div>
              <i-icons-edit
                class="table-icon ml-1"
                size="16px"
                @click="openEditorCnameDialog(record)"
              />
            </div>
          </div>
        </template>
        <template #resolve_switch="{ record }">
          {{ record.resolve_switch === 1 ? '解析' : '移除' }}
        </template>
        <template #result="{ record }">
          <text-ell>
            <span>
              {{
                getOptionsLabel(
                  siteResolveStatusOptions,
                  record.provider_rr_status,
                )
              }}
            </span>
            <span v-if="record.provider_rr_status_text">（{{ record.provider_rr_status_text }}）</span>
          </text-ell>
        </template>
      </a-table>
    </div>
    <a-pagination
      v-model:current="pagination.current"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      show-total
      show-page-size
      :page-size-options="[10, 15, 20, 30, 50]"
      class="mt-6 justify-end"
      @change="v => handleChange(v, pagination.pageSize)"
      @page-size-change="v => handleChange(1, v)"
    />

    <editor-cname-dialog
      v-model:visible="editorCnameDialogVisible"
      :record="editorCnameDialogData"
      @reload="run"
    />
  </resource-dialog>
</template>

<style lang="less" scoped>
:deep(.arco-alert-content) {
  font-size: 14px;
}

:deep(.arco-table-tr) {
  .table-icon {
    display: none;
    color: var(--color-text-7);
    cursor: pointer;
  }

  &:hover {
    .table-copy-text {
      @apply text-primary;
    }

    .table-icon {
      display: inline-block;
      color: #00a65b;
    }
  }
}
</style>
